<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tabs_list{
            display: flex;
        }
        .tab_list_item{
            height: 30px;
            line-height: 30px;
            width: 100px;
            text-align: center;
        }
        .active{
            background-color: #dddddd;
        }
    </style>
</head>

<body>
    <div id="app">
            <!-- 顶部tab -->
            <section class="tabs_list">
                <section @click="handleClick('app-home')" :class="['tab_list_item',{'active':currentTab=='app-home'}]">主页</section>
                <section @click="handleClick('app-introduce')" :class="['tab_list_item',{'active':currentTab=='app-introduce'}]">公司介绍</section>
                <section @click="handleClick('app-product')" :class="['tab_list_item',{'active':currentTab=='app-product'}]">产品介绍</section>
            </section>
            <section>
                <keep-alive>
                    <component :is="currentTab"></component>
                </keep-alive>
            </section>
    </div>
    <script src="./vue.js"></script>
    <script>
        Vue.component("app-home",{
            template:`
            <h1>主页</h1>
            `
        })
        Vue.component("app-introduce",{
            template:`
            <h1>介绍</h1>
            `
        })
        Vue.component("app-product",{
            template:`
            <h1>产品</h1>
            `
        })
        let vm = new Vue({
            el: "#app",
            methods: {
                handleClick:function(currentTab){
                    this.currentTab = currentTab;
                }
            },
            data:{
                // app-home app-introduce app-product
               currentTab:"app-home"
            }
        })
    </script>
</body>

</html>